<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Pannonia - premium responsive admin template by Eugene Kopyov</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" /><![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&amp;sensor=false"></script>

<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.easytabs.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.bootbox.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timepicker.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fullcalendar.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.elfinder.js"></script>

<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>

<script type="text/javascript" src="js/plugins/forms/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autosize.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputmask.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.select2.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.listbox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validation.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.form.js"></script>

<script type="text/javascript" src="js/globalize/globalize.js"></script>
<script type="text/javascript" src="js/globalize/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="js/globalize/globalize.culture.ja-JP.js"></script>

<script type="text/javascript" src="js/plugins/tables/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="js/files/bootstrap.min.js"></script>

<script type="text/javascript" src="js/files/functions.js"></script>

</head>

<body>

	<!-- Fixed top -->
	<div id="top">
		<div class="fixed">
			<a href="index.html" title="" class="logo"><img src="img/logo.png" alt="" /></a>
			<ul class="top-menu">
				<li><a class="fullview"></a></li>
				<li><a class="showmenu"></a></li>
				<li><a href="#" title="" class="messages"><i class="new-message"></i></a></li>
				<li class="dropdown">
					<a class="user-menu" data-toggle="dropdown"><img src="img/userpic.png" alt="" /><span>Howdy, Eugene! <b class="caret"></b></span></a>
					<ul class="dropdown-menu">
						<li><a href="#" title=""><i class="icon-user"></i>Profile</a></li>
						<li><a href="#" title=""><i class="icon-inbox"></i>Messages<span class="badge badge-info">9</span></a></li>
						<li><a href="#" title=""><i class="icon-cog"></i>Settings</a></li>
						<li><a href="#" title=""><i class="icon-remove"></i>Logout</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<!-- /fixed top -->


	<!-- Content container -->
	<div id="container">

		<!-- Sidebar -->
		<div id="sidebar">

			<div class="sidebar-tabs">
		        <ul class="tabs-nav two-items">
		            <li><a href="#general" title=""><i class="icon-reorder"></i></a></li>
		            <li><a href="#stuff" title=""><i class="icon-cogs"></i></a></li>
		        </ul>

		        <div id="general">

			        <!-- Sidebar user -->
			        <div class="sidebar-user widget">
						<div class="navbar"><div class="navbar-inner"><h6>Wazzup, Eugene!</h6></div></div>
			            <a href="#" title="" class="user"><img src="http://placehold.it/210x110" alt="" /></a>
			            <ul class="user-links">
			            	<li><a href="" title="">New users<strong>+12</strong></a></li>
			            	<li><a href="" title="">New orders<strong>+156</strong></a></li>
			            	<li><a href="" title="">New messages<strong>+45</strong></a></li>
			            </ul>
			        </div>
			        <!-- /sidebar user -->

			        <div class="general-stats widget">
				        <ul class="head">
				        	<li><span>Users</span></li>
				        	<li><span>Orders</span></li>
				        	<li><span>Visits</span></li>
				        </ul>
				        <ul class="body">
				        	<li><strong>116k+</strong></li>
				        	<li><strong>1290</strong></li>
				        	<li><strong>554</strong></li>
				        </ul>
				    </div>

				    <!-- Main navigation -->
			        <ul class="navigation widget">
			            <li><a href="index.html" title=""><i class="icon-home"></i>Dashboard</a></li>
			            <li class="active"><a href="#" title="" class="expand" id="current"><i class="icon-reorder"></i>Form elements<strong>3</strong></a>
			                <ul>
			                    <li><a href="forms.html" title="" class="current">Form components</a></li>
			                    <li><a href="wysiwyg.html" title="">WYSIWYG editor</a></li>
			                    <li><a href="form_wizards.html" title="">Wizards</a></li>
			                </ul>
			            </li>
			            <li><a href="#" title="" class="expand"><i class="icon-tasks"></i>Components<strong>4</strong></a>
			                <ul>
			                    <li><a href="components.html" title="">Content components</a></li>
			                    <li><a href="content_grid.html" title="">Content grid</a></li>
			                    <li><a href="blank.html" title="">Blank page</a></li>
			                </ul>
			            </li>
			            <li><a href="media.html" title=""><i class="icon-picture"></i>Media</a></li>
			            <li><a href="icons.html" title=""><i class="icon-th"></i>Icons</a></li>
			            <li><a href="charts.html" title=""><i class="icon-signal"></i>Charts &amp; graphs</a></li>
			            <li><a href="invoice.html" title=""><i class="icon-copy"></i>Invoice</a></li>
			            <li><a href="tables.html" title=""><i class="icon-table"></i>Tables</a></li>
			            <li><a href="#" title="" class="expand"><i class="icon-warning-sign"></i>Error pages<strong>6</strong></a>
			                <ul>
			                    <li><a href="403.html" title="">403 page</a></li>
			                    <li><a href="404.html" title="">404 page</a></li>
			                    <li><a href="405.html" title="">405 page</a></li>
			                    <li><a href="500.html" title="">500 page</a></li>
			                    <li><a href="503.html" title="">503 page</a></li>
			                    <li><a href="offline.html" title="">Offline page</a></li>
			                </ul>
			            </li>
			            <li><a href="typography.html" title=""><i class="icon-text-height"></i>Typography</a></li>
			            <li><a href="calendar.html" title=""><i class="icon-calendar"></i>Calendar</a></li>
			            <li><a href="file_management.html" title=""><i class="icon-cogs"></i>File management</a></li>
	                    <li><a href="#" title="" class="expand"><i class="icon-indent-right"></i>Menu levels<strong>3</strong></a>
			                <ul>
			                    <li><a href="#" title="">Link</a></li>
			                    <li><a href="#" title="" class="expand">Link with submenu</a>
					                <ul>
					                    <li><a href="#" title="">Lorem ipsum</a></li>
					                    <li><a href="#" title="">Dolor sit amet</a></li>
					                </ul>
			                    </li>
			                    <li><a href="#" title="">Link</a></li>
			                </ul>
	                    </li>
			            <li><a href="#" title="" class="expand"><i class="icon-sitemap"></i>Page layouts<strong>3</strong></a>
			                <ul>
			                    <li><a href="no_sidebar_tabs.html" title="">No sidebar tabs</a></li>
			                    <li><a href="no_action_tabs.html" title="">No action tabs</a></li>
			                    <li><a href="actions_on_top.html" title="">Action tabs on top</a></li>
			                    <li><a href="no_breadcrumbs.html" title="">No breadcrumbs line</a></li>
			                </ul>
			            </li>
			        </ul>
			        <!-- /main navigation -->

		        </div>

		        <div id="stuff">

			        <!-- Social stats -->
			        <div class="widget">
			        	<h6 class="widget-name"><i class="icon-twitter"></i>Social statistics</h6>
			        	<ul class="social-stats">
			        		<li>
			        			<a href="" title="" class="orange-square"><i class="icon-rss"></i></a>
			        			<div>
				        			<h4>1,286</h4>
				        			<span>total feed subscribers</span>
				        		</div>
			        		</li>
			        		<li>
			        			<a href="" title="" class="blue-square"><i class="icon-twitter"></i></a>
			        			<div>
				        			<h4>12,683</h4>
				        			<span>total twitter followers</span>
				        		</div>
			        		</li>
			        		<li>
			        			<a href="" title="" class="dark-blue-square"><i class="icon-facebook"></i></a>
			        			<div>
				        			<h4>530,893</h4>
				        			<span>total facebook likes</span>
				        		</div>
			        		</li>
			        	</ul>
			        </div>
			        <!-- /social stats -->


			        <!-- Datepicker -->
		        	<div class="widget">
		        		<h6 class="widget-name"><i class="icon-calendar"></i>Datepicker</h6>
		                <div class="inlinepicker datepicker-liquid"></div>
		            </div>
		            <!-- /datepicker -->


		            <!-- Form elements -->
		            <form action="#" class="widget">
		            	<h6 class="widget-name"><i class="icon-search"></i>Form elements</h6>
		                <input type="text" value="" placeholder="Your name" />
		                <input type="password" value="" placeholder="Your password" />
		                <input type="file" class="styled" />
		                <select name="select2" class="styled" >
		                    <option value="opt1">Usual select box</option>
		                    <option value="opt2">Option 2</option>
		                    <option value="opt3">Option 3</option>
		                    <option value="opt4">Option 4</option>
		                    <option value="opt5">Option 5</option>
		                    <option value="opt6">Option 6</option>
		                    <option value="opt7">Option 7</option>
		                    <option value="opt8">Option 8</option>
		                </select>
		                <select data-placeholder="Choose a Country..." class="select" tabindex="2">
		                    <option value=""></option> 
		                    <option value="Cambodia">Cambodia</option> 
		                    <option value="Cameroon">Cameroon</option> 
		                    <option value="Canada">Canada</option> 
		                    <option value="Cape Verde">Cape Verde</option> 
		                </select>
		                <div class="sidebar-checks">
		                    <label class="checkbox"><input type="checkbox" name="checkbox1" class="styled" value="" checked="checked" />Checkbox checked</label>
		                    <label class="radio"><input type="radio" name="radio" class="styled" value="" />Unchecked radio</label>
		                    <label class="radio"><input type="radio" name="radio" class="styled" value="" checked="checked" />Checked radio</label>
		                </div>
		                <textarea cols="4" rows="4" placeholder="Your message"></textarea>
		                <div class="form-actions">
		                    <input type="submit" value="Submit form" class="btn btn-info pull-left" />
		                    <input type="reset" value="Reset form" class="btn btn-danger pull-right" />
		                </div>
		            </form>
		            <!-- /form elements -->

		        	<!-- Action buttons -->
	                <div class="widget">
	                	<h6 class="widget-name"><i class="icon-search"></i>Action buttons</h6>
	                	<button class="btn btn-block btn-danger">Action button</button>
	                	<button class="btn btn-block btn-info">Action button</button>
	                	<button class="btn btn-block btn-success">Action button</button>
	                </div>
	                <!-- /action buttons -->

			        <!-- Tags input -->
					<div class="widget">
						<h6 class="widget-name"><i class="icon-search"></i>Tags input</h6>
						<input type="text" id="tags1" class="tags" value="these,are,sample,tags" />
					</div>
					<!-- /tags input -->

		        </div>

		    </div>
		</div>
		<!-- /sidebar -->

		<!-- Content -->
		<div id="content">

			<!-- Content wrapper -->
		    <div class="wrapper">

			    <!-- Breadcrumbs line -->
			    <div class="crumbs">
		            <ul id="breadcrumbs" class="breadcrumb"> 
		                <li><a href="index.html">Dashboard</a></li>
		                <li><a href="forms.html">Form elements</a></li>
		                <li class="active"><a href="forms.html" title="">Form components</a></li>
		            </ul>
			        
		            <ul class="alt-buttons">
		                <li><a href="#" title=""><i class="icon-signal"></i><span>Stats</span></a></li>
		                <li><a href="#" title=""><i class="icon-comments"></i><span>Messages</span></a></li>
		                <li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="icon-tasks"></i><span>Tasks</span> <strong>(+16)</strong></a>
		                	<ul class="dropdown-menu pull-right">
		                        <li><a href="#" title=""><i class="icon-plus"></i>Add new task</a></li>
		                        <li><a href="#" title=""><i class="icon-reorder"></i>Statement</a></li>
		                        <li><a href="#" title=""><i class="icon-cog"></i>Settings</a></li>
		                	</ul>
		                </li>
		            </ul>
			    </div>
			    <!-- /breadcrumbs line -->

			    <!-- Page header -->
			    <div class="page-header">
			    	<div class="page-title">
				    	<h5>Form components</h5>
				    	<span>Basic and advanced elements</span>
			    	</div>

			    	<ul class="page-stats">
			    		<li>
			    			<div class="showcase">
			    				<span>New visits</span>
			    				<h2>22.504</h2>
			    			</div>
			    			<div id="total-visits" class="chart">10,14,8,45,23,41,22,31,19,12, 28, 21, 24, 20</div>
			    		</li>
			    		<li>
			    			<div class="showcase">
			    				<span>My balance</span>
			    				<h2>$16.290</h2>
			    			</div>
			    			<div id="balance" class="chart">10,14,8,45,23,41,22,31,19,12, 28, 21, 24, 20</div>
			    		</li>
			    	</ul>
			    </div>
			    <!-- /page header -->

			    <!-- Action tabs -->
			    <div class="actions-wrapper">
				    <div class="actions">

				    	<div id="user-stats">
					        <ul class="round-buttons">
					            <li><div class="depth"><a href="" title="Add new post" class="tip"><i class="icon-plus"></i></a></div></li>
					            <li><div class="depth"><a href="" title="View statement" class="tip"><i class="icon-signal"></i></a></div></li>
					            <li><div class="depth"><a href="" title="Media posts" class="tip"><i class="icon-reorder"></i></a></div></li>
					            <li><div class="depth"><a href="" title="RSS feed" class="tip"><i class="icon-rss"></i></a></div></li>
					            <li><div class="depth"><a href="" title="Create new task" class="tip"><i class="icon-tasks"></i></a></div></li>
					            <li><div class="depth"><a href="" title="Layout settings" class="tip"><i class="icon-cogs"></i></a></div></li>
					        </ul>
				    	</div>

				    	<div id="quick-actions">
				    		<ul class="statistics">
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="blue-square"><i class="icon-plus"></i></a>
					    				<strong>12,476</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 60%;"></div></div>
									<span>User registrations</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="red-square"><i class="icon-hand-up"></i></a>
					    				<strong>621,873</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 20%;"></div></div>
									<span>Total clicks</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="purple-square"><i class="icon-shopping-cart"></i></a>
					    				<strong>562</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 90%;"></div></div>
									<span>New orders</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="green-square"><i class="icon-ok"></i></a>
					    				<strong>$45,360</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 70%;"></div></div>
									<span>General balance</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="sea-square"><i class="icon-group"></i></a>
					    				<strong>562K+</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 50%;"></div></div>
									<span>Total users</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="dark-blue-square"><i class="icon-facebook"></i></a>
					    				<strong>36,290</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 93%;"></div></div>
									<span>Facebook fans</span>
				    			</li>
				    		</ul>
				    	</div>

				    	<div id="map">
				    		<div id="google-map"></div>
				    	</div>

				    	<ul class="action-tabs">
				    		<li><a href="#user-stats" title="">Quick actions</a></li>
				    		<li><a href="#quick-actions" title="">Website statistics</a></li>
				    		<li><a href="#map" title="" id="map-link">Google map</a></li>
				    	</ul>
				    </div>
				</div>
			    <!-- /action tabs -->

		    	<!-- Search widget -->
		    	<form class="search widget" action="#">
		    		<div class="autocomplete-append">
			    		<ul class="search-options">
			    			<li><a href="#" title="Go to search page" class="go-option tip"></a></li>
			    			<li><a href="#" title="Advanced search" class="advanced-option tip"></a></li>
			    			<li><a href="#" title="Settings" class="settings-option tip"></a></li>
			    		</ul>
			    		<input type="text" placeholder="search website..." id="autocomplete" />
			    		<input type="submit" class="btn btn-info" value="Search" />
			    	</div>
		    	</form>
		    	<!-- /search widget -->


		    	<!-- Basic inputs -->
	            <h5 class="widget-name"><i class="icon-align-justify"></i>Basic inputs</h5>

	            <form class="form-horizontal" action="#">
					<fieldset>

						<!-- General form elements -->
						<div class="widget row-fluid">
						    <div class="navbar">
						        <div class="navbar-inner">
						            <h6>Full size inputs</h6>
	                                <ul class="navbar-icons">
	                                    <li><a href="#" class="tip" title="Add new option"><i class="icon-plus"></i></a></li>
	                                    <li><a href="#" class="tip" title="View statistics"><i class="icon-reorder"></i></a></li>
	                                    <li><a href="#" class="tip" title="Parameters"><i class="icon-cogs"></i></a></li>
	                                </ul>
						        </div>
						    </div>

						    <div class="well">

						    	<div class="alert margin">
						    		<button type="button" class="close" data-dismiss="alert">×</button>
						    		This is an example of full width input fields. Please find the fixed size examples below
						    	</div>
						    
						        <div class="control-group">
						            <label class="control-label">Usual input field:</label>
						            <div class="controls"><input type="text" name="regular" class="span12" /></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Password:</label>
						            <div class="controls"><input class="span12" type="password" name="pass" /></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">With placeholder:</label>
						            <div class="controls"><input class="span12" type="text" name="placeholder" placeholder="placeholder" /></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Read only field:</label>
						            <div class="controls"><input class="span12" type="text" name="readonly" readonly value="read only" /></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Disabled field:</label>
						            <div class="controls"><input type="text" name="disabled" disabled="disabled" value="disabled" class="span12" /></div>
						        </div>
	        
						        <div class="control-group">
						            <label class="control-label">Helpers:</label>
						            <div class="controls">
						                <div class="row-fluid">
						                	<div class="span4">
						                    	<input type="text" name="regular" class="span12" /><span class="help-block">Left aligned helper</span>
						                    </div>
						                	<div class="span4">
						                    	<input type="text" name="regular" class="span12" /><span class="help-block align-center">Centered helper</span>
						                    </div>
						                	<div class="span4">
						                    	<input type="text" name="regular" class="span12" /><span class="help-block align-right">Right aligned helper</span>
						                    </div>
						            	</div>
						            </div>
						        </div>

						        <div class="control-group">
						            <label class="control-label">Predefined value:</label>
						            <div class="controls"><input type="text" name="regular" value="http://" class="span12" /></div>
						        </div>

						        <div class="control-group">
						            <label class="control-label">Field with tooltip on focus:</label>
						            <div class="controls"><input type="text" name="regular" title="Tooltip on focus" class="focustip span12" /></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Field with tooltip on hover:</label>
						            <div class="controls"><input type="text" name="regular" title="Tooltip on hover" class="tip span12" /></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Max 10 characters:</label>
						            <div class="controls"><input type="text" name="regular" maxlength="10" placeholder="max 10 characters" class="span12" /></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label"><i class="icon-cog"></i>With icons:</label>
						            <div class="controls"><input type="text" name="regular" class="span12" /><i class="icon-cog field-icon"></i></div>
						        </div>
						        
						        <div class="control-group">
						            <label for="labelfor" class="control-label">Clickable label:</label>
						            <div class="controls"><input type="text" name="labelfor" id="labelfor" class="span12" /></div>
						        </div>
						        
						        <div class="control-group info">
						            <label for="inputInfo" class="control-label">Info input:</label>
						            <div class="controls"><input type="text" id="inputInfo" class="span12" /><span class="help-block">Info help line</span></div>
						        </div>
						        
						        <div class="control-group warning">
						            <label for="inputWarning" class="control-label">Warning input:</label>
						            <div class="controls"><input type="text" id="inputWarning" class="span12" /><span class="help-block">Something may have gone wrong</span></div>
						        </div>
						        
						        <div class="control-group error">
						            <label for="inputError" class="control-label">Warning input:</label>
						            <div class="controls"><input type="text" id="inputError" class="span12" /><span class="help-block">Please correct the error</span></div>
						        </div>
						        
						        <div class="control-group success">
						            <label for="inputSuccess" class="control-label">Success input:</label>
						            <div class="controls"><input type="text" id="inputSuccess" class="span12" /><span class="help-block">Woohoo!</span></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Predefined width:</label>
						            <div class="controls">
						                <input class="input-mini" type="text" placeholder=".input-mini" style="display: block;" />
						                <input class="input-small" type="text" placeholder=".input-small" style="display: block; margin-top: 6px;" />
						                <input class="input-medium" type="text" placeholder=".input-medium" style="display: block; margin-top: 6px;" />
						                <input class="input-large" type="text" placeholder=".input-large" style="display: block; margin-top: 6px;" />
						                <input class="input-xlarge" type="text" placeholder=".input-xlarge" style="display: block; margin-top: 6px;" />
						                <input class="input-xxlarge" type="text" placeholder=".input-xxlarge" style="display: block; margin-top: 6px;" />
						                <input class="input-block-level" type="text" placeholder=".input-block-level" style="display: block; margin-top: 6px;" />
						            </div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Prepend:</label>
						            <div class="controls">
						            	<div class="input-prepend">
						            		<span class="add-on">@</span><input id="prependedInput" type="text" placeholder=".input-prepend" />
						            	</div>
						        	</div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Append:</label>
						            <div class="controls">
						            	<div class="input-append">
						                	<input type="text" placeholder=".input-append" />
						                	<span class="add-on">
						                		<i class="icon-cog"></i>
						                	</span>
						            	</div>
						            </div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Both:</label>
						            <div class="controls">
						            	<div class="input-prepend input-append">
						                    <span class="add-on">
						                    	<i class="icon-bell"></i>
						                    </span>
						                    <input type="text" placeholder=".input-append .input-prepend" />
						                    <span class="add-on">@</span>
						                </div>
						            </div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Appended buttons:</label>
						            <div class="controls">
						                <div class="input-append">
						                	<input id="appendedInputButton" type="text">
						                	<button class="btn" type="button">Go!</button>
						                </div>
						                <div class="input-append" style="display: block; margin-top: 6px;">
						                	<input id="appendedInputButtons" type="text">
						                	<button class="btn" type="button">Options</button>
						                	<button class="btn" type="button">Search</button>
						                </div>
						            </div>
						        </div>

						        <div class="control-group">
						            <label class="control-label">Appended dropdowns:</label>
						            <div class="controls">

						                <!-- Prepend -->
						                <div class="input-prepend">
						                    <div class="btn-group">
						                        <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret dd-caret"></span></button>
						                        <ul class="dropdown-menu">
		                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
		                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
		                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
						                        </ul>
						                    </div>
						                    <input id="prependedDropdownButton" type="text">
						                </div>
						                <!-- /prepend -->

						                <!-- Append, prepend -->
						                <div class="input-prepend input-append" style="display: block; margin-top: 6px;">
						                    <div class="btn-group">
						                        <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret dd-caret"></span></button>
						                        <ul class="dropdown-menu">
		                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
		                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
		                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
						                        </ul>
						                    </div>
						                    <input id="appendedPrependedDropdownButton" type="text">
						                    <div class="btn-group">
						                        <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret dd-caret"></span></button>
						                        <ul class="dropdown-menu pull-right">
		                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
		                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
		                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
						                        </ul>
						                    </div>
						                </div>
						                <!-- /append, prepend -->

						                <!-- Append -->
						                <div class="input-append" style="display: block; margin-top: 6px;">
						                    <input id="appendedDropdownButton" type="text">
						                    <div class="btn-group">
						                        <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret dd-caret"></span></button>
						                        <ul class="dropdown-menu pull-right">
		                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
		                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
		                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
						                        </ul>
						                    </div>
						                </div>
						                <!-- /append -->

						            </div>
						        </div>

						        <div class="control-group">
						            <label class="control-label">Textarea:</label>
						            <div class="controls"><textarea rows="5" cols="5" name="textarea" class="span12"></textarea></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Elastic textarea:</label>
						            <div class="controls"><textarea rows="5" cols="5" name="textarea" class="auto span12"></textarea></div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">With character counter:</label>
						            <div class="controls">
						                <textarea rows="5" cols="5" name="textarea" class="limited span12"></textarea>
						                <span class="help-block" id="limit-text">Field limited to 100 characters.</span>
						            </div>
						        </div>
						        
						        <div class="control-group">
						            <label class="control-label">Tags:</label>
						            <div class="controls"><input type="text" id="tags2" class="tags" value="these,are,sample,tags" /></div>
						        </div>

						        <div class="control-group">
						            <label class="control-label">Tags with autocomplete:</label>
						            <div class="controls"><input type="text" id="tags3" class="tags-autocomplete" value="tags,with,autocomplete" /></div>
						        </div>

						    </div>
						</div>
						<!-- /general form elements -->

					</fieldset> 

					<fieldset>

						<!-- HTML5 inputs -->
						<div class="widget row-fluid">
							<div class="navbar"><div class="navbar-inner"><h6>HTML5 inputs</h6></div></div>

							<div class="well">

						    	<div class="alert margin">
						    		<button type="button" class="close" data-dismiss="alert">×</button>
						    		These inputs are mostly for mobile devices. They open a necessary keyboard on iPhone/iPad. And in most cases are useless on desktop pc's
						    	</div>

								<div class="control-group">
									<label class="control-label">Datetime:</label>
									<div class="controls"><input class="span12" type="datetime" name="datetime" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Datetime local:</label>
									<div class="controls"><input class="span12" type="datetime-local" name="datetime-local" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Date:</label>
									<div class="controls"><input class="span12" type="date" name="date" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Month:</label>
									<div class="controls"><input class="span12" type="month" name="month" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Time:</label>
									<div class="controls"><input class="span12" type="time" name="time" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Week:</label>
									<div class="controls"><input class="span12" type="week" name="week" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Number:</label>
									<div class="controls"><input class="span12" type="number" name="number" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Email:</label>
									<div class="controls"><input class="span12" type="email" name="email" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Url:</label>
									<div class="controls"><input class="span12" type="url" name="url" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Search:</label>
									<div class="controls"><input class="span12" type="search" name="search" /></div>
								</div>

								<div class="control-group">
									<label class="control-label">Tel:</label>
									<div class="controls"><input class="span12" type="tel" name="tel" /></div>
								</div>

							</div>
						</div>
						<!-- /HTML5 inputs -->

					</fieldset>
				</form>
				<!-- /basic inputs -->


				<!-- Form components -->
				<h5 class="widget-name"><i class="icon-th-list"></i>Form components</h5>

				<form class="form-horizontal" action="#">
	                <fieldset>

	                	<!-- Form components -->
	                    <div class="row-fluid">
	                    
	                    	<!-- Column -->
	                        <div class="span6">
	                        
	                        	<!-- Selects, dropdowns -->
	                        	<div class="widget">
	                                <div class="navbar"><div class="navbar-inner"><h6>Styled form components</h6></div></div>
	                            	
	                            	<div class="well">

	                            		<div class="alert margin">
	                            			<button type="button" class="close" data-dismiss="alert">×</button>
	                            			Styled form components using Uniform plugin
	                            		</div>

	                                    <div class="control-group">
	                                        <label class="control-label">Stacked checkboxes: </label>
	                                        <div class="controls">
												<label class="checkbox">
													<input type="checkbox" value="" class="styled" checked>
													Option one is this and that—be sure to include why it's great
												</label>

												<label class="radio">
													<input type="radio" name="optionsRadios1" id="optionsRadios10" class="styled" value="option10" checked="checked">
													Option one is this and that—be sure to include why it's great
												</label>
												<label class="radio">
													<input type="radio" name="optionsRadios1" id="optionsRadios11"  class="styled" value="option11">
													Option two can be something else and selecting it will deselect option one
												</label>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Inline checkboxes/radios: </label>
	                                        <div class="controls">
												<label class="checkbox inline">
													<input type="checkbox" id="inlineCheckbox1" class="styled" value="option1" checked="checked">
													Checked
												</label>
												<label class="checkbox inline">
													<input type="checkbox" id="inlineCheckbox2" class="styled" value="option2">
													Unchecked
												</label>
												<label class="disabled checkbox inline">
													<input type="checkbox" id="inlineCheckbox3" class="styled" value="option3" disabled>
													Disabled
												</label>

												<div style="margin-top: 10px;">
													<label class="radio inline">
														<input type="radio" id="d" class="styled" value="option1">
														Unchecked
													</label>
													<label class="radio inline">
														<input type="radio" id="f" class="styled" value="option2" checked>
														Checked
													</label>
													<label class="disabled radio inline">
														<input type="radio" id="g" class="styled" value="option3">
														Disabled
													</label>
												</div>
	                                        </div>
	                                    </div>

	                                    <div class="control-group">
	                                        <label class="control-label">Styled file uploader:</label>
	                                        <div class="controls">
	                                            <input type="file" class="styled">
	                                        </div>
	                                    </div>

	                                    <div class="control-group">
	                                        <label class="control-label">Styled select:</label>
	                                        <div class="controls">
	                                            <select name="select2" class="styled" >
	                                                <option value="opt1">Usual select box</option>
	                                                <option value="opt2">Option 2</option>
	                                                <option value="opt3">Option 3</option>
	                                                <option value="opt4">Option 4</option>
	                                                <option value="opt5">Option 5</option>
	                                                <option value="opt6">Option 6</option>
	                                                <option value="opt7">Option 7</option>
	                                                <option value="opt8">Option 8</option>
	                                            </select>
	                                        </div>
	                                    </div>
	                                    
	                                    <div class="control-group">
	                                        <label class="control-label">Select with search:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Choose a Country..." class="select" tabindex="2">
	                                                <option value=""></option> 
	                                                <option value="Cambodia">Cambodia</option> 
	                                                <option value="Cameroon">Cameroon</option> 
	                                                <option value="Canada">Canada</option> 
	                                                <option value="Cape Verde">Cape Verde</option> 
	                                            </select>
	                                        </div>             
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Disabled select:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Choose a Country..." class="select" id="disableselect2" tabindex="2">
	                                                <option value=""></option> 
	                                                <option value="Cambodia">Cambodia</option> 
	                                                <option value="Cameroon">Cameroon</option> 
	                                                <option value="Canada">Canada</option> 
	                                                <option value="Cape Verde">Cape Verde</option> 
	                                                <option value="Cayman Islands">Cayman Islands</option> 
	                                                <option value="Central African Republic">Central African Republic</option> 
	                                                <option value="Chad">Chad</option> 
	                                                <option value="Chile">Chile</option> 
	                                                <option value="China">China</option> 
	                                                <option value="Christmas Island">Christmas Island</option> 
	                                                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option> 
	                                                <option value="Colombia">Colombia</option> 
	                                                <option value="Comoros">Comoros</option> 
	                                                <option value="Congo">Congo</option> 
	                                                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option> 
	                                            </select>
	                                        </div>             
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Clear results:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Choose a Country..." id="clear-results" tabindex="2">
	                                                <option value=""></option> 
	                                                <option value="Cambodia">Cambodia</option> 
	                                                <option value="Cameroon">Cameroon</option> 
	                                                <option value="Canada">Canada</option> 
	                                                <option value="Cape Verde">Cape Verde</option> 
	                                                <option value="Cayman Islands">Cayman Islands</option> 
	                                                <option value="Central African Republic">Central African Republic</option> 
	                                                <option value="Chad">Chad</option> 
	                                                <option value="Chile">Chile</option> 
	                                                <option value="China">China</option> 
	                                                <option value="Christmas Island">Christmas Island</option> 
	                                                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option> 
	                                                <option value="Colombia">Colombia</option> 
	                                                <option value="Comoros">Comoros</option> 
	                                                <option value="Congo">Congo</option> 
	                                                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option> 
	                                                <option value="Cook Islands">Cook Islands</option> 
	                                                <option value="Costa Rica">Costa Rica</option> 
	                                                <option value="Cote D'ivoire">Cote D'ivoire</option> 
	                                                <option value="Croatia">Croatia</option> 
	                                                <option value="Cuba">Cuba</option> 
	                                                <option value="Cyprus">Cyprus</option> 
	                                                <option value="Czech Republic">Czech Republic</option> 
	                                                <option value="Denmark">Denmark</option> 
	                                            </select>
	                                        </div>             
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Select with minimum:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Choose a Country..." id="minimum-input-single" tabindex="2">
	                                                <option value=""></option> 
	                                                <option value="Cambodia">Cambodia</option> 
	                                                <option value="Cameroon">Cameroon</option> 
	                                                <option value="Canada">Canada</option> 
	                                                <option value="Cape Verde">Cape Verde</option> 
	                                                <option value="Cayman Islands">Cayman Islands</option> 
	                                                <option value="Central African Republic">Central African Republic</option> 
	                                                <option value="Chad">Chad</option> 
	                                                <option value="Chile">Chile</option> 
	                                                <option value="China">China</option> 
	                                                <option value="Christmas Island">Christmas Island</option> 
	                                                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option> 
	                                                <option value="Colombia">Colombia</option> 
	                                                <option value="Comoros">Comoros</option> 
	                                                <option value="Congo">Congo</option> 
	                                                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option> 
	                                                <option value="Cook Islands">Cook Islands</option> 
	                                                <option value="Costa Rica">Costa Rica</option> 
	                                                <option value="Cote D'ivoire">Cote D'ivoire</option> 
	                                                <option value="Croatia">Croatia</option> 
	                                                <option value="Cuba">Cuba</option> 
	                                                <option value="Cyprus">Cyprus</option> 
	                                                <option value="Czech Republic">Czech Republic</option> 
	                                                <option value="Denmark">Denmark</option> 
	                                            </select>
	                                        </div>             
	                                    </div>
	                                	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Multiple with search:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Your Favorite Football Team" class="select" multiple="multiple" tabindex="6">
	                                                <option value=""></option>
	                                                <optgroup label="NFC EAST">
	                                                    <option>Dallas Cowboys</option>
	                                                    <option selected="selected">New York Giants</option>
	                                                    <option>Philadelphia Eagles</option>
	                                                    <option>Washington Redskins</option>
	                                                </optgroup>
	                                                <optgroup label="NFC NORTH">
	                                                    <option selected="selected">Chicago Bears</option>
	                                                    <option>Detroit Lions</option>
	                                                    <option>Green Bay Packers</option>
	                                                    <option>Minnesota Vikings</option>
	                                                </optgroup>
	                                                <optgroup label="NFC SOUTH">
	                                                    <option selected="selected">Atlanta Falcons</option>
	                                                    <option>Carolina Panthers</option>
	                                                    <option>New Orleans Saints</option>
	                                                    <option>Tampa Bay Buccaneers</option>
	                                                </optgroup>
	                                                <optgroup label="NFC WEST">
	                                                    <option>Arizona Cardinals</option>
	                                                    <option>St. Louis Rams</option>
	                                                    <option>San Francisco 49ers</option>
	                                                    <option>Seattle Seahawks</option>
	                                                </optgroup>
	                                                <optgroup label="AFC EAST">
	                                                    <option>Buffalo Bills</option>
	                                                    <option>Miami Dolphins</option>
	                                                    <option>New England Patriots</option>
	                                                    <option>New York Jets</option>
	                                                </optgroup>
	                                            </select>  
	                                        </div>             
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">With maximum input:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Your Favorite Football Team" multiple="multiple" tabindex="16" id="max-select">
	                                                <option value=""></option>
                                                    <optgroup label="NFC EAST">
	                                                    <option>Dallas Cowboys</option>
	                                                    <option>New York Giants</option>
	                                                    <option>Philadelphia Eagles</option>
	                                                    <option>Washington Redskins</option>
	                                                </optgroup>
	                                                <optgroup label="NFC NORTH">
	                                                    <option>Chicago Bears</option>
	                                                    <option>Detroit Lions</option>
	                                                    <option>Green Bay Packers</option>
	                                                    <option>Minnesota Vikings</option>
	                                                </optgroup>
	                                                <optgroup label="NFC SOUTH">
	                                                    <option>Atlanta Falcons</option>
	                                                    <option>Carolina Panthers</option>
	                                                    <option>New Orleans Saints</option>
	                                                    <option>Tampa Bay Buccaneers</option>
	                                                </optgroup>
	                                                <optgroup label="NFC WEST">
	                                                    <option>Arizona Cardinals</option>
	                                                    <option>St. Louis Rams</option>
	                                                    <option>San Francisco 49ers</option>
	                                                    <option>Seattle Seahawks</option>
	                                                </optgroup>
	                                                <optgroup label="AFC EAST">
	                                                    <option selected="selected">Buffalo Bills</option>
	                                                    <option>Miami Dolphins</option>
	                                                    <option>New England Patriots</option>
	                                                    <option>New York Jets</option>
	                                                </optgroup>
	                                            </select>  
	                                        </div>             
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Minimum characters:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Your Favorite Football Team" multiple="multiple" tabindex="6" id="min-select2">
	                                                <option value=""></option>
	                                                    <optgroup label="NFC EAST">
	                                                    <option>Dallas Cowboys</option>
	                                                    <option>New York Giants</option>
	                                                    <option selected="selected">Philadelphia Eagles</option>
	                                                    <option selected="selected">Washington Redskins</option>
	                                                </optgroup>
	                                                <optgroup label="NFC NORTH">
	                                                    <option>Chicago Bears</option>
	                                                    <option>Detroit Lions</option>
	                                                    <option>Green Bay Packers</option>
	                                                    <option>Minnesota Vikings</option>
	                                                </optgroup>
	                                                <optgroup label="NFC SOUTH">
	                                                    <option>Atlanta Falcons</option>
	                                                    <option>Carolina Panthers</option>
	                                                    <option>New Orleans Saints</option>
	                                                    <option>Tampa Bay Buccaneers</option>
	                                                </optgroup>
	                                                <optgroup label="NFC WEST">
	                                                    <option>Arizona Cardinals</option>
	                                                    <option>St. Louis Rams</option>
	                                                    <option>San Francisco 49ers</option>
	                                                    <option>Seattle Seahawks</option>
	                                                </optgroup>
	                                                <optgroup label="AFC EAST">
	                                                    <option>Buffalo Bills</option>
	                                                    <option>Miami Dolphins</option>
	                                                    <option>New England Patriots</option>
	                                                    <option>New York Jets</option>
	                                                </optgroup>
	                                            </select>  
	                                        </div>             
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Disabled state:</label>
	                                        <div class="controls">
	                                            <select data-placeholder="Your Favorite Football Team" class="select" multiple="multiple" tabindex="6" id="disableselect">
	                                                <option value=""></option>
	                                                <optgroup label="NFC EAST">
	                                                    <option>Dallas Cowboys</option>
	                                                    <option>New York Giants</option>
	                                                    <option selected="selected">Philadelphia Eagles</option>
	                                                    <option selected="selected">Washington Redskins</option>
	                                                </optgroup>
	                                                <optgroup label="NFC NORTH">
	                                                    <option>Chicago Bears</option>
	                                                    <option>Detroit Lions</option>
	                                                    <option>Green Bay Packers</option>
	                                                    <option>Minnesota Vikings</option>
	                                                </optgroup>
	                                            </select>  
	                                        </div>             
	                                    </div>

	                                    <div class="control-group">
	                                        <label class="control-label">Default spinner:</label>
	                                        <div class="controls"><input type="text" id="spinner-default" value="10" /></div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Decimal:</label>
	                                        <div class="controls">
	                                            <input type="text" id="spinner-decimal" name="spinner-decimal" value="5.06" />
	                                            <select id="culture" class="styled">
	                                                <option value="en-EN" selected="selected">English</option>
	                                                <option value="de-DE">German</option>
	                                                <option value="ja-JP">Japanese</option>
	                                            </select>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Currency:</label>
	                                        <div class="controls">
	                                            <input type="text" id="spinner-currency" name="spinner-currency" value="5" />
	                                            <select id="currency" name="currency" class="styled">
	                                                <option value="en-US">US $</option>
	                                                <option value="de-DE">EUR €</option>
	                                                <option value="ja-JP">YEN ¥</option>
	                                            </select>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Overflow:</label>
	                                        <div class="controls"><input type="text" id="spinner-overflow" name="spinner-overflow" value="" /></div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Inline data (links):</label>
	                                        <div class="controls">
	                                            <input type="text" id="spinner-time" name="spinner-time" value="08:30 PM" />
	                                            <select id="culture-time" class="styled">
	                                                <option value="en-EN" selected="selected">English</option>
	                                                <option value="de-DE">German</option>
	                                            </select>
	                                        </div>
	                                    </div>

	                                </div>
	                            </div>
	                            <!-- /selects, dropdowns -->


		                    	<!-- Masked inputs -->
		                        <div class="widget">
		                            <div class="navbar"><div class="navbar-inner"><h6>Masked inputs</h6></div></div>
		                            
		                            <div class="row-fluid well">

		                            	<div class="alert margin">
		                            		<button type="button" class="close" data-dismiss="alert">×</button>
		                            		All masked fields are controlled by <strong>data-mask</strong> property, no JS code required. You just need to set the rules in HTML
		                            	</div>
		                            
		                                <div class="control-group">
		                                    <label class="control-label">Date:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="99/99/9999" /><span class="help-block">99/99/9999</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">Phone:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="(999) 999-9999" /><span class="help-block">(999) 999-9999</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">Phone + Ext:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="(999) 999-9999 / x99999" /><span class="help-block">(999) 999-9999 / x99999</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">Int'l Phone:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="+39 999 999 999" /><span class="help-block">+39 999 999 999</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">Tax ID:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="99-9999999" /><span class="help-block">99-9999999</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">SSN:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="999-99-9999" /><span class="help-block">999-99-9999</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">Product Key:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="a*-999-a999" /><span class="help-block">a*-999-a999</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">Purchase Order:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="aaa-999-***" /><span class="help-block">aaa-999-***</span></div>
		                                </div>
		                                
		                                <div class="control-group">
		                                    <label class="control-label">Percent:</label>
		                                    <div class="controls"><input type="text" class="span12" data-mask="99%" /><span class="help-block">99%</span></div>
		                                </div>


		                                
		                            </div>
		                        </div>
		                        <!-- /masked inputs -->
	                     
	                        </div>
	                        <!-- /column -->
	                    
	                        <!-- Column -->
	                        <div class="span6">
	                        
	                        	<!-- Checkboxes, radios -->
	                            <div class="widget">
	                                <div class="navbar"><div class="navbar-inner"><h6>Unstyled form components</h6></div></div>

	                                <div class="well">

	                                	<div class="alert margin">
	                                		<button type="button" class="close" data-dismiss="alert">×</button>
	                                		Native browser design for form components
	                                	</div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Stacked checkboxes: </label>
	                                        <div class="controls">
												<label class="checkbox">
													<input type="checkbox" value="">
													Option one is this and that—be sure to include why it's great
												</label>

												<label class="radio">
													<input type="radio" name="optionsRadios" value="option1" checked>
													Option one is this and that—be sure to include why it's great
												</label>
												<label class="radio">
													<input type="radio" name="optionsRadios" value="option2">
													Option two can be something else and selecting it will deselect option one
												</label>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Inline checkboxes/radios: </label>
	                                        <div class="controls">
												<label class="checkbox inline">
													<input type="checkbox" id="inlineCheckbox4" value="option1" checked>1
												</label>
												<label class="checkbox inline">
													<input type="checkbox" id="inlineCheckbox5" value="option2">2
												</label>
												<label class="checkbox inline">
													<input type="checkbox" id="inlineCheckbox6" value="option3">3
												</label>

												<div style="margin-top: 10px;">
													<label class="radio inline">
														<input type="radio" id="x" value="option1">1
													</label>
													<label class="radio inline">
														<input type="radio" id="y" value="option2" checked>2
													</label>
													<label class="radio inline">
														<input type="radio" id="z" value="option3">3
													</label>
												</div>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">File uploader: </label>
	                                        <div class="controls">
	                                            <input type="file" id="unstyled-file">
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">On/Off radio: </label>
	                                        <div class="controls">
	                                            <select name="select" class="span3" >
	                                                <option value="opt1">Usual select box</option>
	                                                <option value="opt2">Option 2</option>
	                                                <option value="opt3">Option 3</option>
	                                                <option value="opt4">Option 4</option>
	                                                <option value="opt5">Option 5</option>
	                                                <option value="opt6">Option 6</option>
	                                                <option value="opt7">Option 7</option>
	                                                <option value="opt8">Option 8</option>
	                                            </select>

	                                            <div class="next-row">
		                                            <select name="select" class="span4" >
		                                                <option value="opt1">Usual select box</option>
		                                                <option value="opt2">Option 2</option>
		                                                <option value="opt3">Option 3</option>
		                                                <option value="opt4">Option 4</option>
		                                                <option value="opt5">Option 5</option>
		                                                <option value="opt6">Option 6</option>
		                                                <option value="opt7">Option 7</option>
		                                                <option value="opt8">Option 8</option>
		                                            </select>
		                                        </div>

		                                        <div class="next-row">
		                                            <select name="select" class="span5" >
		                                                <option value="opt1">Usual select box</option>
		                                                <option value="opt2">Option 2</option>
		                                                <option value="opt3">Option 3</option>
		                                                <option value="opt4">Option 4</option>
		                                                <option value="opt5">Option 5</option>
		                                                <option value="opt6">Option 6</option>
		                                                <option value="opt7">Option 7</option>
		                                                <option value="opt8">Option 8</option>
		                                            </select>
		                                        </div>
	                                        </div>
	                                    </div>

	                                    <div class="control-group">
	                                        <label class="control-label">On/Off checkbox: </label>
	                                        <div class="controls">
	                                            <select multiple="multiple" class="multiple" title="Click to Select a City">
	                                                <option selected="selected">Amsterdam</option>      
	                                                <option selected="selected">Atlanta</option>
	                                                <option>Baltimore</option>
	                                                <option>Boston</option>
	                                                <option>Buenos Aires</option>
	                                                <option>Calgary</option>
	                                                <option selected="selected">Chicago</option>
	                                                <option>Denver</option>
	                                                <option>Dubai</option>
	                                                <option>Frankfurt</option>
	                                                <option>Hong Kong</option>
	                                                <option>Honolulu</option>
	                                                <option>Houston</option>
	                                                <option>Kuala Lumpur</option>
	                                                <option>London</option>
	                                                <option>Los Angeles</option>
	                                                <option>Melbourne</option>
	                                                <option>Mexico City</option>
	                                                <option>Miami</option>
	                                                <option>Minneapolis</option>
	                                            </select>
	                                        </div>
	                                    </div>
	                                            	                                

	                                </div>
	                            </div>
	                            <!-- /checkboxes, radios -->
	                        	
	                            <!-- Form related buttons -->
	                            <div class="widget">
	                                <div class="navbar"><div class="navbar-inner"><h6>Form related buttons</h6></div></div>
	                            	
	                            	<div class="well">

	                            		<div class="alert margin">
	                            			<button type="button" class="close" data-dismiss="alert">×</button>
	                            			These are Bootstrap based buttons: toggles, radios, checkboxes and form action buttons
	                            		</div>

	                                    <div class="control-group">
	                                        <label class="control-label">Loading state, single toggle:</label>
	                                        <div class="controls">
	                                            <button type="button" class="btn btn-primary" id="loading" data-loading-text="Loading stuff...">Loading state</button>
	                                            <button type="button" class="btn" data-toggle="button">Single Toggle</button>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Radio buttons:</label>
	                                        <div class="controls">
	                                            <div class="btn-group" data-toggle="buttons-radio">
	                                                <button type="button" class="btn">Left</button>
	                                                <button type="button" class="btn">Middle</button>
	                                                <button type="button" class="btn">Right</button>
	                                            </div>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Checkbox buttons:</label>
	                                        <div class="controls">
	                                            <div class="btn-group" data-toggle="buttons-checkbox">
	                                                <button type="button" class="btn">Left</button>
	                                                <button type="button" class="btn">Middle</button>
	                                                <button type="button" class="btn">Right</button>
	                                            </div>
	                                        </div>
	                                    </div>
	                                
	                                    <div class="form-actions">
	                                        <button type="submit" class="btn btn-primary">Submit</button>
	                                        <button type="button" class="btn btn-danger">Cancel</button>
	                                        <button type="reset" class="btn">Reset</button>
	                                        <span class="help-inline">Left aligned buttons</span>
	                                    </div>
	                                	                                
	                                    <div class="form-actions align-right">
	                                        <span class="help-inline">Right aligned buttons</span>
	                                        <button type="submit" class="btn btn-primary">Submit</button>
	                                        <button type="button" class="btn btn-danger">Cancel</button>
	                                        <button type="reset" class="btn">Reset</button>
	                                    </div>

	                                </div>
	                            </div>
	                            <!-- /form related buttons -->

	                            <!-- Bootstrap form components -->
	                            <div class="widget">
	                                <div class="navbar"><div class="navbar-inner"><h6>Bootstrap form components</h6></div></div>
	                            	
	                            	<div class="well">

	                            		<div class="alert margin">
	                            			<button type="button" class="close" data-dismiss="alert">×</button>
	                            			This is just a small peace of Bootstrap components. See the <a href="components.html">full list here</a>
	                            		</div>

	                                    <div class="control-group">
	                                        <label class="control-label">Left aligned pills:</label>
	                                        <div class="controls">
	                                            <ul class="nav nav-pills">
	                                                <li class="active"><a href="#">Regular link</a></li>
	                                                <li><a href="#">Regular link</a></li>
	                                                <li class="dropdown" id="menu1"><a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Dropdown <b class="caret"></b></a>
	                                                    <ul class="dropdown-menu">
				                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
				                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
				                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
	                                                    </ul>
	                                                </li>
	                                                <li class="disabled"><a href="#">Disabled link</a></li>
	                                            </ul>                        
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Right aligned pills:</label>
	                                        <div class="controls">
	                                            <ul class="nav nav-pills pull-right">
	                                                <li><a href="#">Regular link</a></li>
	                                                <li><a href="#">Regular link</a></li>
	                                                <li class="dropdown" id="menu2">
	                                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">Dropdown <b class="caret"></b></a>
	                                                    <ul class="dropdown-menu">
				                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
				                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
				                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
	                                                    </ul>
	                                                </li>
	                                                <li class="disabled"><a href="#">Disabled link</a></li>
	                                            </ul>                        
	                                        </div>
	                                    </div>

	                                    <div class="control-group">
	                                        <label class="control-label">Pills with icons:</label>
	                                        <div class="controls">
	                                            <ul class="nav nav-pills">
	                                                <li class="active"><a href="#"><i class="icon-plus"></i>Regular link</a></li>
	                                                <li><a href="#"><i class="icon-plus"></i>Regular link</a></li>
	                                                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-plus"></i>Dropdown <b class="caret"></b></a>
	                                                    <ul class="dropdown-menu">
				                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
				                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
				                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
	                                                    </ul>
	                                                </li>
	                                                <li class="disabled"><a href="#"><i class="icon-plus"></i>Disabled link</a></li>
	                                            </ul>                        
	                                        </div>
	                                    </div>

	                                    <div class="control-group">
	                                        <label class="control-label">Stacked pills:</label>
	                                        <div class="controls">
	                                            <ul class="nav nav-pills nav-stacked">
	                                                <li class="active"><a href="#"><i class="icon-home"></i>Regular link</a></li>
	                                                <li><a href="#"><i class="icon-move"></i>Regular link</a></li>
	                                                <li class="dropdown" id="menu3"><a class="dropdown-toggle" data-toggle="dropdown" href="#menu3"><i class="icon-ok"></i>Dropdown <b class="caret"></b></a>
	                                                <ul class="dropdown-menu">
			                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
			                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
			                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
	                                                </ul>
	                                                </li>
	                                                <li class="divider"></li>
	                                                <li class="disabled"><a href="#"><i class="icon-cogs"></i>Disabled link</a></li>
	                                            </ul>                        
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Stacked tabs:</label>
	                                        <div class="controls">
	                                            <ul class="nav nav-tabs nav-stacked">
	                                                <li class="active"><a href="#"><i class="icon-home"></i>Regular link</a></li>
	                                                <li><a href="#"><i class="icon-move"></i>Regular link</a></li>
	                                                <li class="dropdown" id="menu5"><a class="dropdown-toggle" data-toggle="dropdown" href="#menu5"><i class="icon-ok"></i>Dropdown <b class="caret"></b></a>
	                                                <ul class="dropdown-menu">
			                                            <li><a href="#"><i class="icon-plus"></i>Add new option</a></li>
			                                            <li><a href="#"><i class="icon-reorder"></i>View statement</a></li>
			                                            <li><a href="#"><i class="icon-cogs"></i>Parameters</a></li>
	                                                </ul>
	                                                </li>
	                                                <li class="disabled"><a href="#"><i class="icon-cogs"></i>Disabled link</a></li>
	                                            </ul>                        
	                                        </div>
	                                    </div>
	                                
	                                    <div class="control-group">
	                                        <label class="control-label">Nav list:</label>
	                                        <div class="controls">
												<ul class="nav nav-list">
													<li class="nav-header">List header</li>
													<li class="active"><a href="#">Home</a></li>
													<li><a href="#">Library</a></li>
													<li><a href="#">Applications</a></li>
													<li class="nav-header">Another list header</li>
													<li><a href="#">Profile</a></li>
													<li><a href="#">Settings</a></li>
												</ul>                      
	                                        </div>
	                                    </div>

	                                </div>
	                            </div>
	                            <!-- /bootstrap form components -->

	                        </div>
	                        <!-- /column -->                     
	                    </div>
	                    <!-- /form components -->

	                </fieldset>
				</form>
				<!-- /form components -->


	        	<!-- Dual selects -->
	            <div class="widget">
	                <div class="navbar"><div class="navbar-inner"><h6>Dual selects</h6></div></div>
	                
	                <div class="well body clearfix">
	                
	                	<!-- Left box -->
	                    <div class="left-box">
	                        <input type="text" id="box1Filter" class="box-filter" placeholder="Filter entries..." /><button type="button" id="box1Clear" class="filter">x</button>
	                        <select id="box1View" multiple="multiple" class="multiple">
	                            <option value="501649">2008-2009 "Mini" Baja</option>
	                            <option value="501497" selected="selected">AAPA - Asian American Psychological Association</option>
	                            <option value="501493">Agape</option>
	                            <option value="501562" selected="selected">AGE-Alliance for Graduate Excellence</option>
	                            <option value="500676">AICHE (American Inst of Chemical Engineers)</option>
	                            <option value="501460">AIDS Sensitivity Awareness Project ASAP</option>
	                            <option value="500004">Aikido Club</option>
	                            <option value="500336">Akanke</option>
	                        </select>
	                        <span id="box1Counter" class="count-label"></span>
	                        <select id="box1Storage"></select>
	                    </div>
	                    <!-- /left-box -->
	                    
	                    <!-- Control buttons -->
	                    <div class="dual-control">
	                        <button id="to2" type="button" class="btn">&nbsp;&gt;&nbsp;</button>
	                        <button id="allTo2" type="button" class="btn">&nbsp;&gt;&gt;&nbsp;</button><br />
	                        <button id="to1" type="button" class="btn">&nbsp;&lt;&nbsp;</button>
	                        <button id="allTo1" type="button" class="btn">&nbsp;&lt;&lt;&nbsp;</button>
	                    </div>
	                    <!-- /control buttons -->
	                    
	                    <!-- Right box -->
	                    <div class="right-box">
	                        <input type="text" id="box2Filter" class="box-filter" placeholder="Filter entries..." /><button type="button" id="box2Clear" class="filter">x</button>
	                        <select id="box2View" multiple="multiple" class="multiple">
	                            <option value="501053">Academy of Film Geeks</option>
	                            <option value="500001">Accounting Association</option>
	                            <option value="501227" selected="selected">ACLU</option>
	                            <option value="501610" selected="selected">Active Minds</option>
	                            <option value="501514">Activism with A Reel Edge (A.W.A.R.E.)</option>
	                            <option value="501656">Adopt a Grandparent Program</option>
	                            <option value="501050">Africa Awareness Student Organization</option>
	                            <option value="501075">African Diasporic Cultural RC Interns</option>
	                        </select>
	                        <span id="box2Counter" class="count-label"></span>
	                        <select id="box2Storage"></select>
	                    </div>
	                    <!-- /right box -->
	                    
	                </div>
	            </div>
	            <!-- /dual selects -->


	            <!-- Form validation -->
	            <h5 class="widget-name"><i class="icon-ok"></i>Form validation</h5>

				<form id="validate" class="form-horizontal" action="#">
	                <fieldset>

	                    <!-- Form validation -->
	                    <div class="widget">
	                        <div class="navbar"><div class="navbar-inner"><h6>Form validation</h6></div></div>
	                    	<div class="well row-fluid">

	                            <div class="control-group">
	                                <label class="control-label">Input field validation: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" class="validate[required] span12" name="req" id="req"/>
	                                </div>
	                            </div>
	                        
	                            <div class="control-group">
	                                <label class="control-label">Password: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="password" class="validate[required] span12" name="password1" id="password1" />
	                                </div>
	                            </div>
	                        
	                            <div class="control-group">
	                                <label class="control-label">Repeat password: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="password" class="validate[required,equals[password]] span12" name="password2" id="password2" />
	                                </div>
	                            </div>
	                        
	                            <div class="control-group">
	                                <label class="control-label">Minimum size: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" class="validate[required,minSize[6]] span12" name="minValid" id="minValid"/>
	                                </div>
	                            </div>
	                        
	                            <div class="control-group">
	                                <label class="control-label">Maximum size: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" class="validate[required,maxSize[6]] span12" value="0123456789" name="maxValid" id="maxValid"/>
	                                </div>
	                            </div>
	                            <div class="control-group">
	                                <label class="control-label">Only letters: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" value="this is an invalid char '.'" class="validate[required,custom[onlyLetterSp]] span12" name="lettersValid" id="lettersValid"/>
	                                </div>
	                            </div>
	                        
	                            <div class="control-group">
	                                <label class="control-label">Only numbers and space: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" value="10.1" class="validate[required,custom[onlyNumberSp]] span12" name="numsValid" id="numsValid"/>
	                                </div>
	                            </div>
	                        
	                            <div class="control-group">
	                                <label class="control-label">Regular expressions: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]] span12" name="regexValid" id="regexValid"/>
	                                </div>
	                            </div>
	                        
	                            <div class="control-group">
	                                <label class="control-label">Email address: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" value="" class="validate[required,custom[email]] span12" name="emailValid" id="emailValid"/>
	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Past: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" value="2011/06/27" class="validate[custom[date],past[2010/01/01]] span12" name="past" id="past"/>
	                                    <span class="help-block">Checks that the value is a date in the past. Please enter a date ealier than 2010/01/01</span>
	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Future: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" value="2011-01-" class="validate[custom[date],future[NOW]] span12" name="future" id="future"/>
	                                    <span class="help-block">Checks that the value is a date in the future. Please enter a date older than today's date</span>
	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Date format: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <input type="text" value="2011-01-" class="validate[custom[date],future[NOW]] span12" name="dateformatValid" id="dateformatValid"/>
	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Select: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <select name="select2" class="validate[required] styled" data-prompt-position="topLeft:-1,-5">
	                                        <option value="">Usual select box</option>
	                                        <option value="opt2">Option 2</option>
	                                        <option value="opt3">Option 3</option>
	                                        <option value="opt4">Option 4</option>
	                                        <option value="opt5">Option 5</option>
	                                        <option value="opt6">Option 6</option>
	                                        <option value="opt7">Option 7</option>
	                                        <option value="opt8">Option 8</option>
	                                    </select>
	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Minimum: <span class="text-error">*</span></label>
	                                <div class="controls">

										<label class="checkbox inline">
											<input class="validate[minCheckbox[2]] styled" type="checkbox" name="group[group]" id="maxcheck1" value="5" data-prompt-position="topLeft:-1,-5"/>
											Check me
										</label>
										<label class="checkbox inline">
											<input class="validate[minCheckbox[2]] styled" type="checkbox" name="group[group]" id="maxcheck2" value="3" data-prompt-position="topLeft:-1,-5"/>
											Unchecked
										</label>
										<label class="checkbox inline">
											<input class="validate[minCheckbox[2]] styled" type="checkbox" name="group[group]" id="maxcheck3" value="9" data-prompt-position="topLeft:-1,-5"/>
											Unchecked
										</label>

	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Maximum: <span class="text-error">*</span></label>
	                                <div class="controls">

										<label class="checkbox inline">
											<input class="validate[maxCheckbox[2]] styled" type="checkbox" name="group2" id="maxcheck4" value="5" data-prompt-position="topLeft:-1,-5"/>
											Check me
										</label>
										<label class="checkbox inline">
											<input class="validate[maxCheckbox[2]] styled" type="checkbox" name="group2" id="maxcheck5" value="3" data-prompt-position="topLeft:-1,-5"/>
											Unchecked
										</label>
										<label class="checkbox inline">
											<input class="validate[maxCheckbox[2]] styled" type="checkbox" name="group2" id="maxcheck6" value="9" data-prompt-position="topLeft:-1,-5"/>
											Unchecked
										</label>

	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Single checkbox: <span class="text-error">*</span></label>
	                                <div class="controls">

										<label class="checkbox inline">
											<input class="validate[required] styled" type="checkbox" name="accept" id="accept" value="5" data-prompt-position="topRight:0,-5"/>
											Accept terms?
										</label>

	                                </div>
	                            </div>

	                            <div class="control-group">
	                                <label class="control-label">Textarea: <span class="text-error">*</span></label>
	                                <div class="controls">
	                                    <textarea rows="5" cols="5" name="textarea" class="validate[required] span12"></textarea>
	                                </div>
	                            </div>

	                            <div class="form-actions align-right">
	                                <button type="submit" class="btn btn-info">Submit</button>
	                                <button type="reset" class="btn">Reset</button>
	                            </div>

	                        </div>

	                    </div>
	                    <!-- /form validation -->

	                </fieldset>
				</form>
				<!-- /form validation -->


				<!-- Form templates -->
				<h5 class="widget-name"><i class="icon-copy"></i>Form templates</h5>

	            <div class="row-fluid">
	            
	            	<!-- Column -->
	                <div class="span6">
	                
	                	<!-- Default form -->
	                    <form action="#">
	                    	<div class="widget">
	                            <div class="navbar"><div class="navbar-inner"><h6>Default form</h6></div></div>

	                            <div class="well">
	                            
	                                <div class="control-group">
	                                    <label class="control-label">Input field</label>
	                                    <div class="controls"><input type="text" name="regular" class="span12" placeholder="Regular field" /></div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Input field</label>
	                                    <div class="controls"><input type="password" name="password" class="span12" placeholder="Password field" /></div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Checkboxes</label>
	                                    <div class="controls">
	                                        <label class="checkbox"><input type="checkbox" value="" class="styled" checked>Option one is this and that—be sure to include why it's great</label>
	                                        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" class="styled" checked>Option one is this and that—be sure to include why it's great</label>
	                                        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" class="styled">Option two can be something else and selecting it will deselect option one</label>
	                                    </div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Inline checkboxes:</label>
	                                    <div class="controls">
	                                        <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox7" value="option1" class="styled" checked>1</label>
	                                        <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox8" value="option2" class="styled">2</label>
	                                        <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox9" value="option3" class="styled">3</label>
	                                    </div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Textarea:</label>
	                                    <div class="controls">
	                                        <textarea rows="5" cols="5" name="textarea" class="span12"></textarea>
	                                    </div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Tags:</label>
	                                    <div class="controls"><input type="text" id="tags4" class="tags" value="these,are,sample,tags" /></div>
	                                </div>
	                                
	                                <div class="form-actions align-right">
	                                    <button type="submit" class="btn btn-primary">Submit</button>
	                                    <button type="button" class="btn btn-danger">Cancel</button>
	                                    <button type="reset" class="btn">Reset</button>
	                                </div>

	                            </div>
	                            
	                        </div>
	                    </form>
	                    <!-- /default form -->
	                    
	                </div>
	                <!-- /column -->
	            	
	                <!-- Column -->
	                <div class="span6">
	                	
	                    <!-- Horizontal form -->
	                    <form action="#" class="form-horizontal">
	                        <div class="widget">
	                            <div class="navbar"><div class="navbar-inner"><h6>Horizontal form</h6></div></div>

	                            <div class="well">
	                            
	                                <div class="control-group">
	                                    <label class="control-label">Input field</label>
	                                    <div class="controls"><input type="text" name="regular" class="span12" placeholder="Regular field" /></div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Password field</label>
	                                    <div class="controls"><input type="password" name="regular" class="span12" placeholder="Regular field" /></div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Checkboxes</label>
	                                    <div class="controls">
	                                        <label class="checkbox"><input type="checkbox" value="" checked>Option one is this and that—be sure to include why it's great</label>
	                                        <div class="gap"></div>
	                                        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios3" value="option1" checked>Option one is this and that—be sure to include why it's great</label>
	                                        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios4" value="option2">Option two can be something else and selecting it will deselect option one</label>
	                                    </div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Inline checkboxes:</label>
	                                    <div class="controls">
	                                        <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox10" value="option1" checked>1</label>
	                                        <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox11" value="option2">2</label>
	                                        <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox12" value="option3">3</label>
	                                    </div>
	                                </div>
	                                
	                                <div class="control-group">
	                                    <label class="control-label">Textarea:</label>
	                                    <div class="controls">
	                                        <textarea rows="5" cols="5" name="textarea" class="span12"></textarea>
	                                    </div>
	                                </div>
	                                
	                                <div class="form-actions align-right">
	                                    <button type="submit" class="btn btn-primary">Submit</button>
	                                    <button type="button" class="btn btn-danger">Cancel</button>
	                                    <button type="reset" class="btn">Reset</button>
	                                </div>

	                            </div>
	                            
	                        </div>
	                    </form>
	                    <!-- /horizontal form -->
	                	
	                    <!-- Form inline -->
	                    <form action="#" class="form-inline">
	                        <div class="widget">
	                            <div class="navbar"><div class="navbar-inner"><h6>Inline form</h6></div></div>
	                            
	                            <div class="well">

	                                <div class="control-group">
	                                    <input type="text" class="input-small" placeholder="Email">
	                                    <input type="password" class="input-small" placeholder="Password">
										<label class="checkbox"><input type="checkbox" class="styled">Remember me</label>
										<button type="submit" class="btn">Sign in</button>
	                                </div>
	                                <div class="control-group">
	                                    <label class="checkbox"><input type="checkbox" name="checkbox1" class="styled" value="" >Unchecked</label>
	                                    <label class="radio"><input type="radio" name="radio" class="styled" value="" >Unchecked</label>
	                                    <select name="select2" class="styled">
	                                        <option value="opt1">Usual select box</option>
	                                        <option value="opt2">Option 2</option>
	                                        <option value="opt3">Option 3</option>
	                                        <option value="opt4">Option 4</option>
	                                        <option value="opt5">Option 5</option>
	                                        <option value="opt6">Option 6</option>
	                                        <option value="opt7">Option 7</option>
	                                        <option value="opt8">Option 8</option>
	                                    </select>
	                                    <span class="help-inline">This is help note</span>
	                                    <button type="submit" class="btn btn-primary">Sign in</button>
	                                </div>

	                            </div>
	                        </div>
	                    </form>
	                    <!-- /form inline -->

	                </div>
	                <!-- /column --> 
	            </div>
	            <!-- /form templates -->


	            <!-- Form grid -->
	            <h5 class="widget-name"><i class="icon-th"></i>Inputs grid</h5>

	            <form action="#" class="form-horizontal">
	                <fieldset>
	                    <div class="widget">
	                        <div class="navbar">
	                            <div class="navbar-inner"><h6>Inputs grid</h6></div>
	                        </div>
	                        <div class="row-fluid well">
	                            <div class="control-group">
	                                <input type="text" name="regular" value="span12" class="span12" />
	                            </div>
	                            <div class="control-group">
	                                <div class="span6"><input type="text" name="regular" value="span6" class="span12" /></div>
	                                <div class="span6"><input type="text" name="regular" value="span6" class="span12" /></div>
	                            </div>
	                            <div class="control-group">
	                                <div class="span4"><input type="text" name="regular" value="span4" class="span12" /></div>
	                                <div class="span8"><input type="text" name="regular" value="span8" class="span12" /></div>
	                            </div>
	                            <div class="control-group">
	                                <div class="span8"><input type="text" name="regular" value="span8" class="span12" /></div>
	                                <div class="span4"><input type="text" name="regular" value="span4" class="span12" /></div>
	                            </div>
	                            <div class="control-group">
	                                <div class="span4"><input type="text" name="regular" value="span4" class="span12" /></div>
	                                <div class="span4"><input type="text" name="regular" value="span4" class="span12" /></div>
	                                <div class="span4"><input type="text" name="regular" value="span4" class="span12" /></div>
	                            </div>
	                            <div class="control-group">
	                                <div class="span3"><input type="text" name="g3" value="span3" class="span12" /></div>
	                                <div class="span3"><input type="text" name="g3" value="span3" class="span12" /></div>
	                                <div class="span3"><input type="text" name="g3" value="span3" class="span12" /></div>
	                                <div class="span3"><input type="text" name="g3" value="span3" class="span12" /></div>
	                            </div>
	                        </div>
	                    </div>
	                </fieldset>
	            
	                <fieldset>
	                    <div class="widget">
	                        <div class="navbar">
	                            <div class="navbar-inner"><h6>Inputs grid with label</h6></div>
	                        </div>
	                        <div class="row-fluid well">
	                            <div class="control-group">
	                                <label class="control-label">Clickable label:</label>
	                                <div class="controls">
	                                    <span class="span6"><input type="text" name="g6" value="span6" class="span12" /></span>
	                                    <span class="span6"><input type="text" name="g6" value="span6" class="span12" /></span>
	                                </div>
	                            </div>
	                            <div class="control-group">
	                                <label class="control-label">Clickable label:</label>
	                                <div class="controls">
	                                    <span class="span4"><input type="text" name="g4" value="span4" class="span12" /></span>
	                                    <span class="span8"><input type="text" name="g8" value="span8" class="span12" /></span>
	                                </div>
	                            </div>
	                            <div class="control-group">
	                                <label class="control-label">Clickable label:</label>
	                                <div class="controls">
	                                    <span class="span8"><input type="text" name="g8" value="span8" class="span12" /></span>
	                                    <span class="span4"><input type="text" name="g4" value="span4" class="span12" /></span>
	                                </div>
	                            </div>
	                            <div class="control-group">
	                                <label class="control-label">Clickable label:</label>
	                                <div class="controls">
	                                    <span class="span4"><input type="text" name="g4" value="span4" class="span12" /></span>
	                                    <span class="span4"><input type="text" name="g4" value="span4" class="span12" /></span>
	                                    <span class="span4"><input type="text" name="g4" value="span4" class="span12" /></span>
	                                </div>
	                            </div>
	                            <div class="control-group">
	                                <label class="control-label">Clickable label:</label>
	                                <div class="controls">
	                                    <span class="span3"><input type="text" name="g3" value="span3" class="span12" /></span>
	                                    <span class="span3"><input type="text" name="g3" value="span3" class="span12" /></span>
	                                    <span class="span3"><input type="text" name="g3" value="span3" class="span12" /></span>
	                                    <span class="span3"><input type="text" name="g3" value="span3" class="span12" /></span>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </fieldset>
	            
	                <fieldset>

	                    <!-- Alignment -->
	                    <div class="row-fluid">

	                        <!-- Column -->
	                        <div class="span6">

	                            <div class="widget">
	                                <div class="navbar">
	                                    <div class="navbar-inner"><h6>Right aligned</h6></div>
	                                </div>
	                                <div class="well rtl-inputs">
	                                    <div class="control-group"><div class="span2"><input type="text" name="g8" value="span2" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span3"><input type="text" name="g8" value="span3" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span4"><input type="text" name="g4" value="span4" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span5"><input type="text" name="g3" value="span5" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span6"><input type="text" name="g3" value="span6" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span7"><input type="text" name="g3" value="span7" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span8"><input type="text" name="g3" value="span8" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span9"><input type="text" name="g3" value="span9" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span10"><input type="text" name="g3" value="span10" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span11"><input type="text" name="g3" value="span11" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span12"><input type="text" name="g3" value="span12" class="span12" /></div></div>
	                                </div>
	                            </div>

	                        </div>
	                        <!-- /column -->

	                        <!-- Column -->
	                        <div class="span6">

	                            <div class="widget">
	                                <div class="navbar">
	                                    <div class="navbar-inner"><h6>Left aligned</h6></div>
	                                </div>
	                                <div class="well">
	                                    <div class="control-group"><div class="span2"><input type="text" name="g8" value="span2" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span3"><input type="text" name="g8" value="span3" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span4"><input type="text" name="g4" value="span4" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span5"><input type="text" name="g3" value="span5" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span6"><input type="text" name="g3" value="span6" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span7"><input type="text" name="g3" value="span7" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span8"><input type="text" name="g3" value="span8" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span9"><input type="text" name="g3" value="span9" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span10"><input type="text" name="g3" value="span10" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span11"><input type="text" name="g3" value="span11" class="span12" /></div></div>
	                                    <div class="control-group"><div class="span12"><input type="text" name="g3" value="span12" class="span12" /></div></div>
	                                </div>
	                            </div>

	                        </div>
	                        <!-- /column -->

	                    </div>
	                    <!-- /alignment -->

	                </fieldset>
	            </form>
	            <!-- /form grid -->
		    </div>
		    <!-- /content wrapper -->

		</div>
		<!-- /content -->

	</div>
	<!-- /content container -->


	<!-- Footer -->
	<div id="footer">
		<div class="copyrights">&copy;  Brought to you by Eugene Kopyov.</div>
		<ul class="footer-links">
			<li><a href="" title=""><i class="icon-cogs"></i>Contact admin</a></li>
			<li><a href="" title=""><i class="icon-screenshot"></i>Report bug</a></li>
		</ul>
	</div>
	<!-- /footer -->


</body>
</html>
